Quelques bases d’HTML (hypertext markup language)
Html est un langage de description de textes avec des balises, le plus souvent qui s’ouvrent ET qui se ferment.
Une page web est donc un fichier écrit avec un éditeur de textes avec comme extension « html »
qui respecte la syntaxe de ce langage.
Un navigateur est un logiciel client qui ouvre un tel fichier et qui l’interprète.
D’une page web , pour avoir accès au code source , il suffit de faire un clic droit puis « afficher la source ».
Le protocole de la couche applicative qui est utilisé pour le transfert des pages web est http (hypertext transfert protocole)
Le squelette d’un fichier html est :
<!DOCTYPE html> (doctype ou type de document pour l’html 5)
<html>
<head> contient - le titre du document
(inclus dans la balise <title>)
- les
références aux feuilles de style utilisées par le document
- les
balises <meta> pouvant spécifier l'auteur la
description du contenu l'encodage et de nombreuses autres informations
<meta charset="utf-8" >
<title>Titre de la page</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body> pour le contenu de la page à afficher : texte, images...
</body>
</html>
Des balises peuvent avoir des attributs avec des valeurs et se mettent dans les premiers crochets et les balises peuvent s’imbriquer les unes dans les autres
Par exemple
<p align="center" >
<img src="photos_papillons/anthocharis_belia.jpg"
height=100 width=200 >
</p>
<a href="algorithmique.html"> ALGORITHMIQUE
</a>
De manière générale, une balise est de la forme :
<balise1 attribut1= «valeur1» attribut2= «valeur2 »>
texte…
</balise1>
Parfois il n’y a pas </balise1>, c’est quand il n’y
a pas de texte à mettre.
Les balises s’écrivent les unes après les autres ou imbriquées les unes dans les autres (poupées russes)
Quelques balises h1 ;h2 ;h3 ;li ; ul ;a ;link ;p etc avec des attributs possibles ayant chaque des valeurs possibles (les balises sont en minuscule même si pour l’instant les majuscules sont tolérées)
Dans un texte il y a
  pour un espace
<br > pour
un saut de ligne
La feuille de style est un fichier d’extension css qui s’écrit avec un éditeur de textes.
Incorporé dans les fichiers html , il permet de définir le style ou l’apparence pour chaque balise
Par exemple
h1 {
font-size: 200%;
font-style:
normal;
pour définir le style de la
balise h1
color: navy;
text-align: center;
}
L’intérêt étant qu’il y a beaucoup moins de code à écrire dans le fichier html.
Pour plus de souplesse on peut créer des styles de la manière suivante dans le fichier css
.introduction
{ pour définir un style de nom introduction (remarquer le point avant le nom )
color: blue;
}
Ce style personnel s’utilise de la manière suivante dans le fichier html
<p class="introduction">Bonjour et bienvenue
sur mon site !</p> appliquera le style
« introduction » à ce niveau de la page.
TP
Créer un répertoire ‘mon-site ‘ contenant 3 répertoires ‘images’ , ‘programmes’ et ‘autres’ et un fichier html (page d’accueil)
La page d’accueil affichera une image du dossier ’images’ et des liens sur les fichiers html des 3 autres dossiers.
Le dossier ‘images’ contient toutes les images utilisées et un fichier html qui permet de toutes les afficher.
Le dossier ‘programmes’ contient tous les programmes réalisés et un fichier html qui affiche une image du dossier ‘images’ et les liens sur tous les programmes créés et contenus dans ‘programmes’.
Le dossier ‘autres ’contient tous les autres fichiers et un fichier html qui affiche une image du dossier ‘images’ et les liens sur tous les fichiers contenus dans ‘autres’.
Chaque page doit avoir un titre personnalisé.
Repérer les balises et les attributs que j’ai utilisés.
Chercher les balises pour un cadre et pour un tableau ainsi que les attributs possibles.
(C’est très facile à trouver sur le site du zéro ou autres).
http://www.codeshttp.com/baliseh.htm
Quelle est la différence entre img et a href pour afficher une image ?
Où se trouve l’indication concernant la feuille de style ?